<template>
  <div>
    <el-tabs type="border-card" @tab-click="handleTabClick">
      <el-tab-pane v-for="(item, index) in tabList"
                   :key="index"
                   :label="item.label">

        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input placeholder="请输入内容"
                      clearable
                      v-model="searchData.val"
                      size="small"
                      style="width: 400px"
                      class="input-with-select">
              <el-select v-model="searchData.select"
                         clearable
                         style="width: 120px"
                         slot="prepend"
                         placeholder="请选择">
                <el-option label="检查项" value="checkStandardItem"></el-option>
                <el-option label="检查字典" value="dictValue"></el-option>
<!--                <el-option label="档案门类" value="idCategory"></el-option>-->
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item class="search-btn">
            <el-button type="primary" class="btn" size="small" icon="el-icon-search" @click="onSubmit">查询</el-button>
            <el-button type="primary" class="btn" size="small" icon="el-icon-search" @click="handleAdd">添加</el-button>
          </el-form-item>
        </el-form>

        <div class="list">
          <div class="list-box" v-loading="listLoading">

            <test-item-category v-for="(item, index) in listData"
                                     :key="index"
                                     :item="item"
                                     :dicSelectData="dicSelectData"
                                     :dicOtherData="dicOtherData"
                                     :categoryData="categoryData"
                                     @handleSwitch="getList"
                                     @handleDelSuccess="getList"
                                     @handleEdit="handleEdit(item, index)"
                                     class="test-item">
            </test-item-category>

            <div class="empty" v-if="Number(page.total)<1">
              暂无数据
            </div>

          </div>
        </div>

        <el-pagination
          class="page"
          background
          v-if="Number(page.total)>0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.pageNo"
          :page-sizes="[20, 40, 60, 80]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Number(page.total)">
        </el-pagination>

      </el-tab-pane>
    </el-tabs>

    <el-dialog :title="dialogTitle"
               width="90%"
               top="3vh"
               :destroy-on-close="true"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :visible.sync="dialogAddEdit"
               :before-close="handleBeforeClose">

      <test-category-add :categoryData="categoryData"
                         :dicSelectData="dicSelectData"
                         :dicOtherData="dicOtherData"
                         :loading="loading"
                         :tabsMenuCode="tabsMenuCode"
                         :type="type"
                         :rowData="rowData"
                         @handleCansole="handleCansole"
                         @handleSubmit="handleSubmit"></test-category-add>

    </el-dialog>

  </div>
</template>

<script>
import { getSysDicId } from '../../../../api/dictionary/dictionary'
import { addMetaDataTestItem, editMetaDataTestItem, getMetaDataTestItem } from '../../../../api/testItem/metadataTest'

import TestItemCategory from '../settingComponents/testItem/testItemCategory'
import { getSelfCategoryTree } from '../../../../api/category/category'
import TestCategoryAdd from '../settingComponents/testItem/testCategoryAdd'

export default {
  name: 'CategoryTest', // 门类检测
  components: {
    TestCategoryAdd,
    TestItemCategory
  },
  data () {
    return {
      tabList: [],
      title: '新建检测项',
      dialogTitle: '检测项元数据设置',
      dialogAddEdit: false,
      tabsMenuCode: '',
      loading: false,
      listLoading: false,
      rowData: {},
      categoryData: [],
      dicSelectData: [], // 运算规则
      dicOtherData: [], // 其他检测项
      listData: [],
      type: 'add',
      page: {
        pageSize: 20,
        pageNo: 1,
        total: 0
      },
      searchData: {
        val: '',
        select: 'checkStandardItem'
      },
      params: []
    }
  },
  mounted () {
    this.getTabsMenu()
  },
  methods: {
    getTabsMenu () {
      getSysDicId('sx_check_link').then(res => {
        res.data.data.map(item => {
          this.tabList.push({
            label: item.dictLabel,
            value: item.dictValue
          })
        })
        this.tabsMenuCode = this.tabList[0].value
        this.getList()
      })
      // 左侧获取门类
      getSelfCategoryTree('daModel', false).then(res => {
        this.categoryData = res.data.data
      })
      // 运算规则
      getSysDicId('check_op_rule').then(res => {
        this.dicSelectData = res.data.data
      })
      // 其他检测项
      getSysDicId('other_check_item').then(res => {
        this.dicOtherData = res.data.data
      })
    },
    handleTabClick (val) {
      this.page.pageNo = 1
      this.tabsMenuCode = this.tabList[val.index].value
      this.getList()
    },
    getList () {
      const param = {
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize,
        params: [{
          name: 'checkLink',
          op: 'eq',
          value: this.tabsMenuCode
        }]
      }
      if (this.params.length > 0) {
        param.params = param.params.concat(this.params)
      }

      this.listLoading = true
      getMetaDataTestItem(param, { checkScope: 2 }).then(res => {
        this.listData = res.data.data.list
        this.page.total = res.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.page.pageNo = val
      this.getList()
    },
    onSubmit () {
      this.params = []
      if (this.searchData.val) {
        this.params = [{
          name: this.searchData.select,
          op: 'like',
          value: this.searchData.val
        }]
      }
      this.getList()
    },
    handleAdd () {
      this.type = 'add'
      this.dialogAddEdit = true
      this.dialogTitle = '检测项元数据设置'
      this.rowData.isEnable = true
    },
    handleEdit (item, index) {
      // 修改
      this.type = 'edit'
      this.dialogAddEdit = true
      this.dialogTitle = '修改'
      this.rowData = JSON.parse(JSON.stringify(item))
    },
    handleSubmit (obj) {
      // 新增修改提交
      const formData = JSON.parse(JSON.stringify(obj))
      formData.checkLink = this.tabsMenuCode
      delete formData.categoryName
      this.loading = true
      const request = this.type === 'add' ? addMetaDataTestItem(formData) : editMetaDataTestItem(formData)
      request.then(res => {
        this.getList()
        this.$message.success(this.type === 'add' ? '新增成功！' : '修改成功！')
        this.loading = false
        this.dialogAddEdit = false
        this.rowData = {
          isEnable: true
        }
        this.type = 'add'
      }).catch(() => {
        this.loading = false
      })
    },
    handleBeforeClose (done) {
      this.dialogAddEdit = false
      this.loading = false
      this.rowData = {
        isEnable: true
      }
      this.type = 'add'
      done()
    },
    handleCansole () {
      this.dialogAddEdit = false
      this.loading = false
      this.rowData = {
        isEnable: true
      }
      this.type = 'add'
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn {
    position: relative;
    top: -5px;
  }

  ::v-deep .el-tabs__content {
    height: calc(100vh - 125px);

    .el-tab-pane {
      height: 100%;
    }

    .list {
      height: calc(100vh - 240px);
      margin: 0 -15px -15px -15px;
      padding: 0 12px 20px;
      overflow-y: auto;
    }

    .list-box {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .test-item {
        margin-bottom: 20px;
        margin-right: 15px;
        width: 300px;
        max-width: calc(50% - 15px);
      }
    }

    .page {
      margin-top: 20px;
      text-align: right;
    }

    .empty {
      padding: 30px;
      text-align: center;
      margin: 0 auto;
    }
  }
</style>
